<template>
    <div class="dialog-wrap">
      <el-dialog title="导入" :visible="dialogVisible" width="40%" size="mini" @close="close" append-to-body>
          <el-form ref="form"  label-width="90px" size="mini">
              <el-form-item label="模板下载">
                  <a href="javascript:void(0)" @click="downLoadExcel">导入模板</a>
                  <span class="setting-icon" @click="excelSetting">
                      <i class="el-icon-setting"></i>
                  </span>
              </el-form-item>
              <el-form-item >
                  <el-upload
                        ref="uploadFile"
                      class="upload-demo"
                      drag
                      :headers="headerss"
                      :action="url"
                      :limit="1"
                      :file-list="list"
                      :on-success="suc"
                      :on-error="err"
                      >
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      <div class="el-upload__tip" slot="tip">请模板文件编辑后上传</div>
                  </el-upload>
              </el-form-item>
          </el-form>
      </el-dialog>
      <el-dialog title="模板字段设置" :visible="filedVisible" width="52%" size="mini" @close="closefiledVisible">
          <el-transfer v-model="fields" :data="lists" :titles="['字段','模板字段']"></el-transfer>
          <div class="footer clearfix">
              <el-button type="primary" size="small" class="footer-btn" @click="closefiledVisible">确定</el-button>
          </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import { getToken } from '@/utils/auth'
  export default {
      props:{
          dialogVisible:{
              type:Boolean,
              default:false
          },
          filedList:{
              type:Array,
              default(){
                  return []
              }
          },
          currenFields:{
              type:Object,
              default(){
                  return {}
              }
          },
          classPath:String
      },
      computed:{
          url(){
            
              return `${process.env.VUE_APP_BASE_API}/${process.env.VUE_APP_APP_NAME}/index/import/excel?classPath=${this.classPath}`
          },
          baseUrl(){
              if(this.$env){
  
              }
          },
          lists(){
              return this.filedList.map((el)=>{
                  return {
                      key:el.fields,
                      label:el.fieldDesc,
                      disabled:false
                  }
              })||[]
          }
      },
      data() {
          return {
              filedVisible:false,
              fields:this.generateData(),
              headerss:{
                  Authorization:getToken()
              },
              list:[]
          }
      },
      methods:{
          generateData (){
              let data = []
              if(JSON.stringify(this.currenFields) != '{}'){
                  for(var key in this.currenFields){
                      data.push(key)
                  }
              }
              return data
          },
          excelSetting(){
              this.filedVisible = true
          },
          suc(response, file, fileList){
             if(response.code == 0){
              this.$message.success("excel导入成功")
              this.$emit('refreshList')
              this.close()
             }else{
              this.$refs.uploadFile.clearFiles()
              this.$message.error(response.message||"excel导入失败")
             }
          },
          err(response, file, fileList){
              console.log("244")
          },
          downLoadExcel(){
              let obj = {}
              if(this.fields&&this.fields.length!=0){
                  this.fields.forEach((el)=>{
                  let index = this.lists.findIndex((e)=>{
                      return el == e.key
                  })
                  
                  obj[el] = index!=-1?this.lists[index].label:''
              })
  
              this.$emit('downLoadExcel',obj)
              }
              return false
          },
          close(){
              this.$emit('update:dialogVisible',false)
          },
          closefiledVisible(){
              this.filedVisible = false
          }
      }
  }
  </script>
  <style lang="scss" scoped>
  .setting-icon{
      padding-left: 10px;
      cursor: pointer;
      font-size: 18px;
  }
  .footer{
      clear: both;
      height: 60px;
      padding: 10px 20px 0px;
  }
  .footer-btn{
      float: right;
  }
  </style>